<template>
  <div class="app-container">
    <div class="filter-container" style="padding-bottom: 20px;">
      <el-input @keyup.enter.native="handleFilter" style="width: 180px;" class="filter-item" placeholder="姓名" v-model="listQuery.name">
      </el-input>
      <el-input @keyup.enter.native="handleFilter" style="width: 180px;" class="filter-item" placeholder="手机号码" v-model="listQuery.mobile">
      </el-input>
      <el-select @change='handleFilter' placeholder="员工类型" style="width: 140px" class="filter-item" v-model="listQuery.type">
        <el-option v-for="(v, k) in opts.type" :key="k" :label="v" :value="k">
        </el-option>
      </el-select>
      <el-select @change='handleFilter' placeholder="在职状态" style="width: 140px" class="filter-item" v-model="listQuery.status">
        <el-option v-for="(v, k) in opts.status" :key="k" :label="v" :value="k">
        </el-option>
      </el-select>
      <el-input @keyup.enter.native="handleFilter" style="width: 160px;" class="filter-item" placeholder="职位" v-model="listQuery.post">
      </el-input>
      <el-button class="filter-item" type="primary" icon="el-icon-reset" @click="handleReset">重置</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="fetchData">搜索</el-button>
    </div>
    <el-row>
      <el-col :span="4">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>部门</span>
          </div>
          <el-tree
            :data="department"
            :props="defaultProps"
            node-key="id"
            accordion
            @node-click="handleNodeClick">
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-table :data="data.list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column label="姓名" width="120">
            <template slot-scope="scope">
              {{scope.row.name}}
            </template>
          </el-table-column>
          <el-table-column label="性别" width="60" align="center">
            <template slot-scope="scope">
              <span>{{opts.gender[scope.row.gender] || scope.row.gender}}</span>
            </template>
          </el-table-column>
          <el-table-column label="员工类型" width="80" align="center">
            <template slot-scope="scope">
              {{opts.type[scope.row.type] || scope.row.type}}
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="在职状态" width="80" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | statusFilter">{{opts.status[scope.row.status] || scope.row.status}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="所属部门" min-width="160">
            <template slot-scope="scope">
              {{departmentFull[scope.row.department] || scope.row.department}}
            </template>
          </el-table-column>
          <el-table-column label="职位" width="110">
            <template slot-scope="scope">
              {{opts.post[scope.row.post] || scope.row.post}}
            </template>
          </el-table-column>
          <el-table-column label="手机号" width="110">
            <template slot-scope="scope">
              {{scope.row.mobile}}
            </template>
          </el-table-column>
          <el-table-column label="工号" width="110">
            <template slot-scope="scope">
              {{scope.row.no}}
            </template>
          </el-table-column>
          <el-table-column label="身份证号" width="180">
            <template slot-scope="scope">
              {{scope.row.idcard}}
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          style="margin-top:30px;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="data.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getList, staffGender, staffStatus, staffPost, staffType, staffDepartment, staffDepartmentFull, staffDepartmentTree } from '@/api/staff'

export default {
  data() {
    return {
      data: {
        limit: 10,
        total: 0,
        page: 1
      },
      department: staffDepartmentTree,
      departmentFull: staffDepartmentFull,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      list: null,
      listQuery: {},
      opts: {
        status: staffStatus,
        post: staffPost,
        type: staffType,
        gender: staffGender,
        department: staffDepartment
      },
      listLoading: true
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        regular: 'success',
        draft: 'gray',
        leave: 'danger',
        dismiss: 'danger',
        retired: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleNodeClick(o) {
      this.listQuery.department = o.id
      this.fetchData()
    },
    handleFilter() {
      if (this.listQuery.status === '') delete this.listQuery.status
      this.fetchData()
    },
    handleReset() {
      this.listQuery = {}
      this.$forceUpdate()
      this.fetchData()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.data = response.data
        this.listLoading = false
      })
    }
  }
}
</script>

<style>
.el-card__body{padding: 10px;}
.el-col-20{padding-left: 20px;}
</style>
